<template>
	<view>
		<!-- 聊天列表 -->
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
			<!-- 左侧区域 -->
			<block v-for="(item,index) in list":key="index">
				<user-chart-list :item="item" :index="index"></user-chart-list>
			</block>
			<!-- 右面区域 -->
			<!-- <view  class="flex align-start px-2" style="flex-direction:row-reverse;">
			 <image src="/static/common/nothing.png" mode="" class="rounded-circle" style="width: 100rpx;height: 100rpx;"></image>
			 <view class="bg-light p-2 mx-2 rounded" style="max-width: 400rpx;min-width: 100rpx;">
			 	你好啊
			 </view>
			</view> -->
		</scroll-view>

		<!-- 底部操作条 -->
		<view class="fixed-bottom flex align-center  border-top bg-white" style="height: 100rpx;">
			<input type="text" value="" class="border flex-1 px-2 ml-2 rounded bg-light" style="padding: 5rpx;" placeholder="文明发言" />
			<view class="iconfont   icon-fabu text-center font-lg " hover-class="text-main" style="width: 100rpx; ">

			</view>
		</view>


	</view>
</template>

<script>
	
	import userChartList from '@/components/user-chat/user-chat-list.vue'
	export default {
		components:{userChartList},
		data() {
			return {

				scrollHeight: 400,
				list: [{
					user_id: 2,
					avatar: "/static/common/nothing.png",
					username: "昵称",
					data: "你好啊",
					type: "text",
					create_time: 1614267494
				},
				{
					user_id: 1,
					avatar: "/static/common/nothing.png",
					username: "昵称",
					data: "你好啊",
					type: "text",
					create_time: 1614267494
				}]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res) //px
					// windowHeight-uni可使用窗口高度   不包含NavigationBar和TabBar的高度
					// uni.upx2px(100) 包含在windowHeight-uni  需要去除才是真正的使用高度
					// windowHeight是px  需要-100rpx  --rpx转换px进行计算
					this.scrollHeight = res.windowHeight - uni.upx2px(100)
				}
			})
		},
		methods: {

		}
	}
</script>

<style>

</style>
